<template>
  <div class="loading">
      <div class="content">
          <!-- <div>
              <loading color="#144DC5"/>
          </div> -->
          <div class="tips">Recognizing, please wait {{countDown}} seconds</div>
      </div>
      
  </div>
</template>
<script>
import {loading} from 'vant'
export default{
  components:{
      loading
  },
  data () {
    return {
      timer: null,
      countDown: 15
    }
  },
  created () {
    this.timer = setInterval(() => {
      this.countDown = this.countDown === 0 ? 15 : this.countDown - 1 
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>
<style lang="scss" scoped>
.loading{
  height: 100vh;
  width: 100vw;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  .content{
      text-align: center;
      position: absolute;
      top: 56%;
      left: 50%;
      width: 100%;
      transform: translate(-50%,-50%);
      font-size: 32px;
      .tips{
          margin-top: 64px;
          color: #000;
      }
  }
}
</style>